<template>
	<div class="appDetails">
		<Card>
			<div class="title">
				详情
			</div>
			<div class="form">
				<label>名称：</label>
				<span>{{name}}</span>
			</div>
			<div class="form">
				<label>命名空间</label>
				<span>{{nameSpace}}</span>
			</div>
			<div class="form">
				<label>标签：</label>
				<span>{{label}}</span>
			</div>
			<!-- <div class="form">
				<label>注释：</label>
				<span>{{notes}}</span>
			</div> -->
			<div class="form">
				<label>创建时间：</label>
				<span>{{date}}</span>
			</div>
			<div class="form">
				<label>选择器：</label>
				<span>{{select}}</span>
			</div>
			<div class="form">
				<label>策略：</label>
				<span>{{strategy}}</span>
			</div>
			<div class="form">
				<label>最小就绪秒数：</label>
				<span>{{second}}</span>
			</div>
			<div class="form">
				<label>历史版本限制值：</label>
				<span>{{history}}</span>
			</div>
			<div class="form" v-if="overflow !== undefined">
				<label>滚动更新策略：</label>
				<span>最大激增数:{{overflow.maxSurge}}，最大无效数：{{overflow.maxUnavailable}}</span>
			</div>
			<div class="form">
				<label>状态：</label>
				<span>{{state.updatedReplicas}}个已更新，共计{{state.replicas}}个，{{state.availableReplicas}}个可用，{{state.replicas - state.availableReplicas}}个不可用</span>
			</div>
		</Card>
		<Card class="myCard">
			<div class="title">
				新副本集
			</div>
			<Table :columns="columns" :data="tableData" @on-row-click="toPod"></Table>
		</Card>
		<Card class="myCard">
			<div class="title">
				容器组水平伸缩器
			</div>
			<Table :columns="columns1" :data="tableData1"></Table>
		</Card>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				// 名称
				name: '',
				// 命名空间
				nameSpace: '',
				// 标签
				label: '',
				// 注释
				// notes: '',
				// 时间
				date: '',
				// 选择器
				select: '',
				// 策略
				strategy: '',
				// 秒数
				second: '',
				// 历史版本限制值
				history: '',
				// 滚动策略
				overflow: '',
				// 状态
				state: '',
				// label集合
				labelList: [],
				columns: [
					{
						title: '副本集',
						key: 'metadata',
						width: '230px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '120px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							let str = ''
							for (var item in params.row.metadata.labels) {
								str += '{' + item + ':' + params.row.metadata.labels[item] + '}'
							}
							return h('div', str)
						}
					},
					{
						title: '容器组',
						key: 'spec',
						width: '80px',
						render: (h, params) => {
							return h('span', params.row.status.availableReplicas + '/' + params.row.status.replicas)
						}
					},
					{
						title: '状态',
						key: 'status',
						width: '80px',
						render: (h, params) => {
							if (params.row.status.availableReplicas === params.row.status.replicas) {
								return h('span', '正常')
							} else {
								return h('span', '非正常')
							}
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					},
					{
						title: '镜像',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.template.spec.containers[0].image)
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '目标CPU使用率',
						key: 'spec',
						render: (h, params) => {
							return h('div', params.row.spec.metrics[0].resource.targetAverageUtilization)
						}
					},
					{
						title: '当前CPU使用率',
						key: 'status',
						render: (h, params) => {
							return h('span', params.row.status.currentMetrics[0].resource.currentAverageValue)
						}
					},
					{
						title: '最小副本数',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.minReplicas)
						}
					},
					{
						title: '最大副本数',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.maxReplicas)
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					}
				],
				tableData1: [],
				timer: {}
			}
		},
		methods: {
			getDetails () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.$route.params.type + '&nameSpace=' + this.$route.params.group + '&name=' + this.$route.params.name, {}, r => {
					if (r.data.code === 0) {
						let myData = r.data.data
						// 名称
						this.name = myData.metadata.name
						// 命名空间
						this.nameSpace = myData.metadata.namespace
						// 标签
						this.label = myData.metadata.labels
						// 注释
						// this.notes = myData.metadata.annotations
						// 时间
						this.date = myData.metadata.creationTimestamp
						// 选择器
						this.select = myData.spec.selector
						// 策略
						this.strategy = myData.spec.strategy.type
						// 秒数
						this.second = myData.spec.template.spec.terminationGracePeriodSeconds
						// 历史版本限制值
						this.history = myData.spec.revisionHistoryLimit
						// 滚动策略
						this.overflow = myData.spec.strategy.rollingUpdate
						// 状态
						this.state = myData.status
						for (var item in myData.spec.selector.matchLabels) {
							this.labelList.push({'name': item, 'value': myData.spec.selector.matchLabels[item]})
						}
						this.getCopyList()
						this.getPodList()
					}
				})
			},
			getCopyList () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=ReplicaSet&nameSpace=' + this.$route.params.group + '&selectorvalue=' + this.labelList[0].value + '&selectorkey=' + this.labelList[0].name, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.items
					}
				})
			},
			// 获取容器组水平伸缩器数据
			getPodList () {
				this.$api.get(0, '/kuber/v2/k8s/autoscaling?nameSpace=' + this.$route.params.group + '&target=' + this.name, {}, r => {
					if (r.data.code === 0) {
						this.tableData1 = r.data.data.items
					}
				})
			},
			// 跳往容器
			toPod (index) {
				let myList = []
				for (var item in index.metadata.labels) {
					myList.push({'name': item, 'value': index.metadata.labels[item]})
				}
				sessionStorage.nameSpace = index.metadata.namespace
				sessionStorage.name = index.metadata.name
				sessionStorage.labelkey = myList[0].name
				sessionStorage.labelvalue = myList[0].value
				this.$router.push({
					name: 'copyDetails'
				})
			}
		},
		mounted () {
			this.getDetails()
		},
		destroyed () {
			let my = this
			window.clearInterval(my.timer)
		}
	}
</script>
